import { type ComponentPropsWithoutRef, memo, useMemo } from 'react'
import { type VariantProps, tv } from 'tailwind-variants'

type Props = {
  /** コンポーネントのタイトル */
  alt?: string
  /** コンポーネントの幅 */
  width?: number | string
  /** コンポーネントの高さ */
  height?: number | string
} & VariantProps<typeof classNameGenerator>
type ElementProps = Omit<ComponentPropsWithoutRef<'svg'>, keyof Props>

const classNameGenerator = tv({
  base: ['smarthr-ui-SmartHRLogo', 'shr-align-bottom'],
  variants: {
    fill: {
      white: 'shr-fill-white',
      brand: 'shr-fill-brand',
      black: 'shr-fill-black',
    },
  },
})

export const SmartHRLogo = memo<Props & ElementProps>(
  ({ alt = 'SmartHR（スマートHR）', width, height, fill, className, ...rest }) => {
    const style = useMemo(
      () => ({
        ...(width ? { width: convertValue(width) } : { height: convertValue(height || '1.5em') }),
      }),
      [height, width],
    )
    const actualClassName = useMemo(
      () => classNameGenerator({ className, fill: fill ?? 'white' }),
      [fill, className],
    )

    return (
      <svg
        {...rest}
        role="img"
        aria-label={alt}
        viewBox="0 0 150 28"
        className={actualClassName}
        style={style}
      >
        <path
          fillRule="evenodd"
          d="M98.888 9.245a5.27 5.27 0 0 0-.9-.07c-.731 0-1.301.07-1.958.446-.596.34-1.065.72-1.452 1.422l-.102-1.151c-.008-.118-.061-.227-.147-.308s-.2-.125-.318-.124h-3.27c-.061 0-.122.012-.179.035s-.108.058-.151.101-.078.095-.101.152-.035.117-.035.179V24.39c0 .061.012.122.035.179s.058.108.101.152.095.078.151.101.118.035.179.035h3.506c.061 0 .122-.012.179-.035s.108-.058.152-.101.078-.095.101-.152.035-.117.035-.179v-8.715c0-.728.501-1.638 1.074-2.055.522-.381 1.107-.645 1.899-.714.221-.02.566-.005 1.032.039.27.025.507-.186.51-.459l.045-2.771a.47.47 0 0 0-.39-.468l.005-.002zm10.598 12.225l-.679.03c-.571 0-.973-.11-1.21-.327s-.355-.63-.355-1.238v-6.989h2.109a.47.47 0 0 0 .179-.035c.056-.023.108-.058.151-.101a.45.45 0 0 0 .101-.152.46.46 0 0 0 .036-.179V9.646a.46.46 0 0 0-.036-.179.45.45 0 0 0-.101-.152c-.043-.043-.095-.078-.151-.101a.47.47 0 0 0-.179-.035h-2.109v-3.06c0-.061-.012-.122-.035-.179a.48.48 0 0 0-.101-.152.47.47 0 0 0-.152-.101.46.46 0 0 0-.179-.035h-3.505a.47.47 0 0 0-.179.035c-.057.023-.108.058-.151.101s-.078.095-.102.152-.035.117-.035.179v3.06h-1.641a.46.46 0 0 0-.33.136c-.043.043-.078.095-.101.152s-.035.117-.035.179v2.835c0 .061.012.122.035.179s.058.108.101.152a.46.46 0 0 0 .33.136h1.64v7.527c0 1.613.396 2.795 1.188 3.543s1.935 1.125 3.42 1.125c.817 0 1.57-.099 2.261-.295.195-.056.33-.243.33-.45v-2.465a.47.47 0 0 0-.516-.465l.001.003zm-27.191-.05c-.46.261-.993.39-1.6.39-.54 0-.975-.144-1.302-.435a1.44 1.44 0 0 1-.491-1.131c0-.665.228-1.212.683-1.644s1.155-.648 2.106-.648h1.594v2.52c-.199.37-.529.686-.99.945v.003zm2.42-11.625c-.945-.413-2.028-.62-3.252-.62-1.32 0-2.484.219-3.495.654s-1.788 1.05-2.334 1.793a4.23 4.23 0 0 0-.789 2.019.47.47 0 0 0 .465.515h3.513c.228 0 .41-.171.45-.396a1.47 1.47 0 0 1 .488-.893c.345-.3.832-.45 1.458-.45.702 0 1.221.192 1.56.576s.505.922.505 1.616v.84h-1.65c-2.37 0-4.158.44-5.358 1.317s-1.8 2.127-1.8 3.75c0 .882.233 1.677.698 2.385s1.095 1.257 1.893 1.65c.82.398 1.721.6 2.633.589 1.612 0 2.884-.55 3.813-1.65v.9c0 .061.012.122.035.179s.058.108.101.152.095.078.152.101.117.035.179.035h3.306c.061 0 .122-.012.179-.035s.108-.058.151-.101.078-.095.101-.152.035-.117.035-.179l.001-9.75c0-1.2-.27-2.186-.804-3.003s-1.275-1.43-2.22-1.842h-.013zm59.431 2.679c-.531.471-1.305.705-2.319.705h-3.3V7.844h3.3c1.024 0 1.8.236 2.325.705s.789 1.13.789 1.974c0 .828-.266 1.478-.795 1.95v.002zm5.805 11.705l-4.05-7.931c1.2-.54 2.092-1.275 2.718-2.205s.939-2.145.939-3.645c0-1.347-.311-2.49-.93-3.423s-1.515-1.641-2.676-2.12-2.54-.72-4.134-.72h-7.46a.47.47 0 0 0-.179.035c-.056.023-.108.058-.151.101a.45.45 0 0 0-.101.152.44.44 0 0 0-.035.179v19.785a.44.44 0 0 0 .035.179.45.45 0 0 0 .101.152c.043.043.095.078.151.101a.47.47 0 0 0 .179.035h3.69a.47.47 0 0 0 .179-.035c.057-.023.108-.058.151-.101a.47.47 0 0 0 .102-.152c.023-.057.035-.117.035-.179v-7.433h2.854l3.846 7.644a.47.47 0 0 0 .417.257h3.9c.35 0 .575-.369.416-.68l.003.003zM130.063 4.112h-3.681a.47.47 0 0 0-.468.468v8.598h-7.861V4.58a.47.47 0 0 0-.468-.468h-3.695a.47.47 0 0 0-.468.468v19.808a.47.47 0 0 0 .468.468h3.695a.47.47 0 0 0 .468-.468v-7.491h7.864v7.491a.47.47 0 0 0 .468.468h3.681a.47.47 0 0 0 .468-.468V4.58a.47.47 0 0 0-.468-.468h-.003zM11.591 16.622a1.12 1.12 0 0 0 .368.063c.461 0 .893-.288 1.053-.75.203-.582-.105-1.218-.685-1.421a3.09 3.09 0 0 1-2.029-3.433 3.09 3.09 0 0 1 3.046-2.574 3.09 3.09 0 0 1 2.919 2.075c.203.582.84.89 1.419.687a1.12 1.12 0 0 0 .687-1.419c-.419-1.181-1.24-2.177-2.321-2.812s-2.35-.869-3.586-.66-2.358.847-3.17 1.801-1.261 2.165-1.268 3.418c.001 1.104.344 2.18.983 3.08s1.542 1.579 2.584 1.943h0v.002zm55.746-7.448c-1.005 0-1.893.203-2.661.605a5.16 5.16 0 0 0-1.907 1.73c-.369-.787-.897-1.372-1.58-1.758s-1.5-.576-2.448-.576c-.939 0-1.779.175-2.52.525-.736.348-1.379.865-1.878 1.509l-.108-1.32c-.009-.117-.062-.226-.148-.306s-.199-.124-.317-.123H50.5c-.061 0-.122.012-.179.035s-.108.058-.151.101-.078.095-.101.152-.035.117-.035.179V24.39c0 .061.012.122.035.179s.058.108.101.152.095.078.151.101.117.035.179.035h3.506c.061 0 .122-.012.179-.035s.108-.058.152-.101.078-.095.101-.152.035-.117.035-.179v-9.63c.248-.426.564-.756.954-.99s.845-.348 1.365-.348c.474 0 .863.064 1.167.192s.535.367.698.72.24.845.24 1.479v8.58c0 .061.012.122.035.179s.058.108.101.152.095.078.151.101.117.035.179.035h3.506c.061 0 .122-.012.179-.035s.108-.058.152-.101.078-.095.101-.152.035-.117.035-.179v-9.465c.228-.474.535-.845.926-1.11s.858-.399 1.41-.399c.474 0 .861.064 1.16.192s.529.366.69.713.24.832.24 1.458v8.607c0 .061.012.122.035.179s.058.108.101.152.095.078.152.101.117.035.179.035h3.521c.061 0 .122-.012.179-.035s.108-.058.152-.101.078-.095.101-.152.035-.117.035-.179v-9.266c0-2.106-.424-3.624-1.275-4.554s-2.052-1.395-3.608-1.395l.006.002zm-42.901 9.8c0 1.674-.666 3.28-1.849 4.463s-2.789 1.849-4.463 1.85h-9.6c-1.674 0-3.28-.666-4.464-1.85s-1.849-2.79-1.85-4.464v-9.6c0-.83.165-1.652.483-2.419s.785-1.463 1.373-2.05 1.286-1.051 2.053-1.367 1.59-.478 2.421-.476h9.6c1.674.001 3.279.666 4.462 1.85s1.849 2.789 1.85 4.462v9.6h-.017zm-.274-15.638c-.778-.779-1.699-1.4-2.713-1.829a8.49 8.49 0 0 0-3.326-.672h-9.6a8.49 8.49 0 0 0-3.326.672c-1.014.428-1.936 1.049-2.714 1.829a8.49 8.49 0 0 0-1.83 2.715A8.49 8.49 0 0 0 0 9.376v9.6a8.49 8.49 0 0 0 .672 3.326c.429 1.014 1.05 1.936 1.83 2.714s1.699 1.4 2.714 1.828a8.49 8.49 0 0 0 3.326.672h9.6a8.49 8.49 0 0 0 3.326-.672c1.014-.428 1.936-1.049 2.714-1.828a8.49 8.49 0 0 0 2.502-6.041v-9.6a8.49 8.49 0 0 0-.672-3.326c-.43-1.017-1.046-1.931-1.83-2.715l-.019.003zm-9.09 8.391c-.582-.203-1.218.105-1.421.685s.105 1.218.686 1.421a3.09 3.09 0 0 1 2.029 3.433 3.09 3.09 0 0 1-3.046 2.574 3.09 3.09 0 0 1-2.919-2.075c-.203-.582-.84-.889-1.419-.687s-.89.837-.687 1.419c.419 1.181 1.24 2.177 2.321 2.812s2.35.869 3.586.66 2.358-.847 3.17-1.801 1.261-2.165 1.268-3.418c-.001-1.104-.344-2.18-.983-3.08s-1.542-1.579-2.584-1.944h0zm28.489 1.114l-3.024-1.2c-1.79-.7-3.083-1.208-3.083-2.448s1.031-1.971 2.76-1.971c1.455 0 2.703.408 4.08 1.35.097.065.215.092.331.073s.22-.079.293-.171l1.855-2.336c.158-.198.126-.483-.064-.65-1.736-1.509-4.119-2.397-6.495-2.397-4.392 0-7.704 2.748-7.704 6.393 0 3.686 3.005 5.28 4.296 5.79l3.144 1.323c1.68.702 2.79 1.167 2.79 2.445 0 .77-.39 2.06-2.991 2.06-1.521 0-3.354-.705-4.901-1.87a.46.46 0 0 0-.636.069l-2.165 2.636c-.078.094-.116.215-.105.337s.069.235.162.314c2.07 1.704 4.779 2.673 7.53 2.673 5.574 0 8.112-3.45 8.112-6.626 0-2.805-1.329-4.646-4.18-5.79l-.006-.005z"
        />
      </svg>
    )
  },
)

const convertValue = (value: number | string) => (typeof value === 'string' ? value : `${value}px`)
